<style lang="less">
  @import '../../styles/common.less';
</style>
<style scope>

</style>

<template>
  <div style="width: 500px">
    <Form ref="bannerData" :model="bannerData" :rules="ruleValidate" :label-width="110">
      <FormItem label="标题：" prop="bannerTitle">
        <Input v-model="bannerData.bannerTitle" placeholder="请输入标题"></Input>
      </FormItem>
      <FormItem label="连接：">
        <Input v-model="bannerData.moreUrl" placeholder="请输入连接"></Input>
      </FormItem>
      <FormItem label="描述：">
        <Input v-model="bannerData.bannerDesc" type="textarea" :autosize="{minRows: 5,maxRows: 8}"
               placeholder="请输入描述"></Input>
      </FormItem>
      <FormItem label="栏目：" prop="bannerSubject">
        <Select v-model="bannerData.bannerSubject" style="width:200px">
          <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="图片：" prop="pic">
        <Row type="flex" justify="center" align="middle" class="height-100">
          <Upload
            :format="['jpg', 'png', 'jpeg', 'gif', 'bmp', 'svg']"
            action="/school/fileUpload/"
            :on-format-error="handleFormatError" :on-success="handleSuccess" :on-remove="handleRemove">
            <span>选择图片上传&nbsp;&nbsp;</span>
            <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
          </Upload>
        </Row>
      </FormItem>

      <FormItem>
        <Button type="primary" @click="handleSubmit('bannerData')">提交</Button>
        <Button type="ghost" @click="handleReset('bannerData')">清空</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: "bannermod",
    data() {
      return {
        bannerData: {
          bannerTitle: '',
          bannerDesc: '',
          bannerImg: '',
          bannerSubject: '',
          moreUrl: '',
          id:0
        },
        ruleValidate: {
          bannerTitle: [
            {required: true, message: '请输入名称', trigger: 'blur'}
          ],
          bannerSubject: [
            {required: true, message: '请选择栏目', trigger: 'blur'}
          ]
        },
        typeList: []
      }
    },
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let dataArr = this.bannerData;

            if(this.bannerData.id > 0){
              this.$http.post('/school/updBanner', dataArr).then(res => {
                this.$Message.success('修改成功!');
              });
            }else {
              this.$http.post('/school/addBanner', dataArr).then(res => {
                this.$Message.success('提交成功!');
                this.handleReset(name);
              });
            }
          }
        })
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请选择图片文件。'
        });
      },
      handleSuccess(response, file, fileList) {
        this.bannerData.bannerImg = response.data[0];
      },
      handleRemove(file, fileList) {
        this.bannerData.bannerImg = '';
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      }
    },
    mounted() {
      if(this.$route.query.id == undefined) return;
      this.$http.get('/school/getBannerById?id='+this.$route.query.id).then(res=>{
        var dt = res.data.data;
        this.bannerData.id = dt.id;
        this.bannerData.bannerTitle = dt.bannerTitle;
        this.bannerData.bannerDesc = dt.bannerDesc;
        this.bannerData.bannerImg = dt.bannerImg;
        this.bannerData.bannerSubject = dt.bannerSubject;
        this.bannerData.moreUrl = dt.moreUrl;

      });
    },
    created() {
      this.$http.get('/school/getSubTypes').then(res => {
        var datas = res.data.data;
        for (var d in datas) {
          var p = {
            value: datas[d].id,
            label: datas[d].name
          };

          this.typeList.push(p);
        }
      });
    }
  }
</script>

<style scoped>

</style>
